<template>
  <div>
    <van-sticky>
      <van-tabs v-model:active="tabActive" background="#b4b4b4" class="tab-aaa">
        <van-tab name="a" title="播放" />
        <van-tab name="b" title="平铺" />
      </van-tabs>
    </van-sticky>
    <div v-if="tabActive == 'a'">
      <p class="h3-11" v-if="list[playIndex]">{{ list[playIndex].time }}</p>
      <div class="pic-img">
        <img :style="picWidth" :src="list[playIndex].url" v-if="list[playIndex]" />
      </div>

      <div class="scroll-box">
        <div class="sssss" id="sssss">
          <div class="img-box-item" v-for="(item, index) in list" @click="playIndex = index"
            :class="{ active: index == playIndex }">
            <img :src="item.url" />
            <div>{{ item.time }}</div>
          </div>
        </div>
      </div>

      <div class="play-btn-g">
        <van-button type="primary" @click="s = s > 1 ? s - 0.25 : 1" :disabled="s == 1">缩小</van-button>
        <van-button type="primary" @click="s = 1">重置</van-button>
        <van-button type="primary" @click="s = s + 0.25">放大</van-button>
      </div>

      <div class="play-btn-g">
        <van-button type="primary" @click="playIndex--" :disabled="playIndex == 0">上一个</van-button>
        <van-button v-if="!timer" type="primary" @click="play_rand()"
          :disabled="playIndex >= list.length - 1">播放</van-button>
        <van-button v-else type="primary" @click="clearTimer()">暂停</van-button>
        <van-button type="primary" @click="playIndex++" :disabled="playIndex >= list.length - 1">下一个</van-button>
      </div>
    </div>
    <div v-if="tabActive == 'b'">
      <div class="img-222" v-for="(item, index) in list">
        <p>{{ item.time }}</p>
        <img :src="item.url" />
      </div>
    </div>

   <link-botton-group></link-botton-group>
  </div>
</template>
<script>
  import { getImgslist } from "@/api/RainForecast";
  //import getWeather  from  '@/api/getGdWeather'
  export default {
    data() {
      var menusList = [{ title: "首页", path: "/" }];
      return {
        fore: {},
        list: [],
        tabActive: "a",
        playIndex: 0,
        menusList,
        interval: 0.5,
        timer: false,
        s: 1,
      };
    },
    created() {
      this.initData();
    },
    mounted() { },
    computed: {
      picWidth() {
        return "width:" + this.s * 100 + "%";
      },
    },
    watch: {},
    methods: {
      clearTimer() {
        clearInterval(this.timer); this.timer = false;
      },
      initData() {
        this.list = getImgslist();
      },
      play_rand() {
        this.timer = setInterval(() => {
          if (this.playIndex >= this.list.length - 1) {
            clearInterval(this.timer);
            this.timer = false;
            document.getElementById("sssss").scrollLeft = this.playIndex*100;
            return;
          }
          this.playIndex++;
        }, this.interval * 1000);
      },
    },
  };
</script>

<style scoped>
  .h3-11 {
    font-size: 18px;
    text-align: center;
  }

  .sssss {
    /* display: flex; */
    white-space: nowrap;
    overflow-x: auto;

  }

  .img-box-item {
    display: inline-block;
    width: 90px;
    /* height: 80px; */
    margin: 5px;
    text-align: center;
  }

  .img-box-item img {
    width: 100%;
  }

  .scroll-box {
    overflow-x: hidden;
  }

  .img-big {
    width: 100%;
    overflow: auto;
  }

  .img-big img {
    width: 100%;
  }

  .img-box-item.active img {
    border: 1px solid red;
  }

  .img-222 img {
    width: 100%;
    /* margin-bottom: 10px; */
    /* margin: 9px; */
  }

  .img-222 {
    margin: 10px;
  }

  .img-222 p {
    margin-bottom: 0;
    margin-top: 30px;
    font-size: 18px;
  }

  .play-btn-g {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
  }

  .pic-img {
    height: 90vw;
    overflow: auto;
  }

  .img-box-item p {
        Word-break: break-word;
        display: block;
        line-height: 1.5;
        height: 40px;
        /* overflow: hidden; */
        white-space: normal;
    }
</style>